<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.1.js"></script>
		<style type="text/css">
			table {
				width: 98%;
				border: 1px orange solid;
				border-collapse: collapse;
				margin: auto;
			}

			table th,
			td {
				border: 1px orange solid;
				padding: 10px;
			}

			a {
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
				$.ajax({
					url: 'goods.json',
					dataType: 'json',
					success: function(data) {
						// console.log(data);
						let t1 = `<table>
										<tr>
											<th>全选 <input type="checkbox" id="all" /></th>
											<th>商品</th>
											<th>单价</th>
											<th>数量</th>
											<th>小计</th>
											<th>操作</th>
										</tr>`;
						let t2 = `</table>`;
						
						let trs = ``;
						data.forEach(function(val){
							trs += `<tr>
										<td><input type="checkbox" class="check" /></td>
										<td>${val.name}</td>
										<td>￥${val.price}</td>
										<td><a href="#" class="dec">-</a><input type="text" value="${val.num}"><a href="#" class="inc">+</a></td>
										<td>￥${val.sum}</td>
										<td><a href="#" class="del">删除</a></td>
									</tr>`;
						})
                        $('body').append(t1 + trs + t2);
					}
				})
			})
		</script>
	</body>
</html>
